<template>
    <view class='page'>
        <view class="logo">
            <image src="../../static/logo01.png" mode=""></image>
        </view>
        <!-- 填写区 -->
        <view class="input-info">
            <view class="info">
                <input type="tel" maxlength="11" v-model="form.mobile" placeholder="请输入手机号">
                <view class="more">
                    <!-- <text class="lg text-gray cuIcon-close"></text> -->
                </view>
            </view>

            <view class="info" :style="isLoginWay ? 'display:none' : ''">
                <input :password='!isPassword' v-model="form.password" maxlength="26" placeholder="请输入密码">
                <!-- <view class="more">
                    <text class="iconfont" :class="isPassword ? 'icon-eye-off' : 'icon-eye-on'" @click="isPassword = !isPassword"></text>
                    <text class="mo" @click="findCode">忘记密码</text>
                </view> -->
            </view>
        </view>
        <!-- 按钮 -->
        <view class="btn-info">
            <!-- <view class="btn" @click="onLogin()">
                <text>登录</text>
            </view> -->
            <button type="default" :class="{ disabled: !isChecked }" :disabled="loading" @click="onLogin">
                登录
            </button>
        </view>
        <view class="content-label">
            <view class="radio">
                <view class="pic" @click="isChecked = !isChecked">
                    <image src="../../static/login/select.png" mode="" v-if="isChecked"></image>
                    <image src="../../static/login/no.png" mode="" v-else></image>
                </view>
                <view class="text">
                    阅读并同意<text style="color:#0080f6" @click="policy(1)">《隐私政策》</text>和<text style="color: #0080f6" @click="policy(2)">《服务协议》</text>
                </view>
            </view>
        </view>

        <quick-message ref="message"></quick-message>
    </view>
</template>

<script>
import {
    bindChat
} from "@/api/chat.js"
export default {
    components: {},
    data() {
        return {
            // 表单
            form: {
                mobile: '',
                code: '',
                password: '',
            },
            isLoginWay: false,
            codeText: '获取验证码',
            isPassword: false,
            isChecked: false,
            loading: false,
            toastText: '',
        };
    },
    onLoad(options) {

    },
    methods: {
        // 协议
        policy(e) {
            // #ifdef H5
            this.$navigateTo({
                url: "/pagesB/login/agreenment",
                params: {
                    type: e,
                },
            });
            // #endif
            // #ifndef H5
            let link = "https://h5.weilankangyang.com/#/pagesA/login/agreenmentB?type=" + e
            uni.navigateTo({
                url: '/pagesB/login/tool?link=' + encodeURIComponent(link)
            })
            // #endif
        },
        showToast() {
            this.$refs.message.show({
                msg: this.toastText,
                type: "error",
            });
        },
        checkAll() {
            return new Promise((resolve, reject) => {
                if (!this.isChecked) {
                    this.toastText = "请同意服务协议";
                    this.showToast();
                    reject();
                } else if (!this.form.mobile) {
                    this.toastText = "请输入手机号";
                    this.showToast();
                    reject();
                } else if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile)) {
                    this.toastText = "请输入正确的手机号";
                    this.showToast();
                    reject();
                } else if (!this.form.password) {
                    this.toastText = "请输入登录密码";
                    this.showToast();
                    reject();
                } else if (this.form.password.length < 6) {
                    this.toastText = "登录密码最少6位";
                    this.showToast();
                    reject();
                }
                resolve();
            });
        },
        onLogin() {
            console.log(this.$store.dispatch, 777)
            this.checkAll().then(() => {
                let json = {
                    login_account: this.form.mobile,
                    login_pass: this.$md5.md5(this.form.password),
                }
                this.$store.dispatch('Login', json).then((res) => {
                    console.log(res, 456)
                    if (res.code == 1) {
                        bindChat({
                            client_id: uni.getStorageSync("client_id")
                        })
                        this.$refs.message.show({
                            msg: "登录成功",
                            type: "success"
                        })
                        setTimeout(() => {
                            uni.reLaunch({
                                url: '/pages/mine/index'
                            })
                        }, 1000)
                    }
                }).catch(() => {
                    this.loading = false;
                });
            }).catch(() => { })
        },
    },
};
</script>
<style scoped lang='scss'>
.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 240rpx;

  image {
    width: 400rpx;
    height: 120rpx;
  }
}
/* 填写 */
.input-info {
  padding: 0 6%;
  height: 240rpx;

  .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100rpx;
    border-bottom: 2rpx solid #f6f6f6;

    input {
      width: 70%;
      height: 100%;
      font-size: 26rpx;
      color: #222222;
    }

    .more {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 30%;
      height: 100%;

      .iconfont {
        font-size: 34rpx;
      }

      .mo {
        font-size: 26rpx;
        padding-left: 20rpx;
        margin-left: 10rpx;
        border-left: 2rpx solid #eeeeee;
      }
    }
  }
}
/* 按钮 */
.btn-info {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100rpx;

  button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 80rpx;
    background: linear-gradient(to right, $base, $change-clor);
    border-radius: 10rpx;
    color: #ffffff;
    font-size: 28rpx;
    &.disabled {
      opacity: 0.4;
    }
  }
}
.content-label {
  position: fixed;
  bottom: 15%;
  font-size: 24rpx;
  color: #999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx 15%;
  //   line-height: 50rpx;
  .radio {
    display: flex;
    align-items: center;
    .pic {
      padding: 20rpx;
      image {
        width: 30rpx;
        height: 30rpx;
      }
    }
    .text {
      padding: 20rpx 0;
    }
  }
}
</style>